<template>
    <div>
        <svg-icon v-if="item_que.required === 1" icon-class="必填" style="width:32px;height:32px;float: left;margin-right:5px"></svg-icon>
        <p style="width:50px;height:32px;float: left;margin-right:5px;font-weight:bold">
            {{item_que.viewSort}}
        </p>
        <el-form
                ref="dataForm"
                :model="item_que"
                label-position="center"
                label-width="150px"
        >
            <h4 class="title">
                {{item_que.title}}
            </h4>
            <h5 class="title" style="font-style:Italic;color:#9a9798;margin: 20px">
                "{{item_que.description}}"
            </h5>
            <el-form-item
                    :label="'选项'+this.tipText+':'"
            >

                <el-cascader clearable :options="item_que.options" :props="props" v-model="item_que.answer.options"></el-cascader>

            </el-form-item>
            <el-form-item
                    label="其他："
                    v-if="haveOther.have"
            >
                <el-input  v-model="item_que.answer.otherValue"  type="text" placeholder="用户自定义填写..." class="inputBox" :disabled="isLook"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "answer_chained",
        data() {
            return {
                item_que:{},
                oldOptions:[],
                props: {value:'id',emitPath: false},
                tipText:''
            }
        },
        props: {
            itemData:Object,
            itemUpDataAnswer:Function,
            itemIndex:Number,
            isSlectThis:Boolean,
            isLook:Boolean
        },
        computed: {
            haveOther(){
                let bb = {
                    have:false,
                    index:-1
                }
                this.item_que.options.forEach((item, index) => {
                    if(item.isOther === 1){
                        bb =  {
                            have:true,
                            index:index
                        }
                    }
                });
                return bb
            },
            op_Other(){
                let onlyOther = {}
                this.item_que.options.forEach((item, index) => {
                    if(item.isOther === 1){
                        onlyOther =  JSON.parse(JSON.stringify(item))
                    }
                });
                return onlyOther
            }
        },
        watch: {
            isSlectThis: function(newVal){
                if(this.isLook){
                    return;
                }else{
                    this.gotUpData()
                }
            },
        },
        methods: {
            gotUpData(){
                console.log('更新'+this.item_que.title+'的答案')
                this.item_que.options = this.oldOptions
                this.itemUpDataAnswer(this.itemIndex,this.item_que);
            }
        },
        created() {
            this.item_que=JSON.parse(JSON.stringify(this.itemData));
            if(this.item_que.isChildAnswer === 2){
                this.props= { multiple: true,value:'id',emitPath: false }
                if(this.item_que.selectNum === 0){

                }else if(this.item_que.selectNum >0){
                    let tipNum = this.item_que.selectNum
                    this.tipText = "(最多选中"+tipNum+"个)"
                }else{
                    let tipNum = -this.item_que.selectNum
                    this.tipText = "(最少选中"+tipNum+"个)"
                }
            }
            if(this.isLook){
                this.item_que.options.forEach((item, index) => {
                    item.disabled = true
                })
            }
            this.oldOptions = this.item_que.options
            if(this.haveOther.have){
                this.item_que.options.splice(this.haveOther.index, 1);
            }
        }

    }
</script>

<style scoped>
    .title{
        text-align: center;overflow: hidden;margin: 0;font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
        vertical-align: middle;
    }
</style>
